<template>
	<view class="">
		<view class="" v-if="srcUrl">
			<web-view @message="handleMessage" :src="srcUrl" :update-title="false"></web-view>
		</view>
		<view class="" v-else>
			loading
		</view>
	</view>
</template>

<script>
	import {
		sub,
		sublike,
		unsub,
		unsublike
	} from '../../common/event'
	import {
		srsUrl
	} from '../../config'
	export default {
		data() {
			return {
				srcUrl: "",
				wv: '',
				id: '',
				name: '',
				roomId: '',
				mtname:''
			}
		},
		onBackPress(options) {
			console.log(147,options)
			this.sendMessage({
				type: "backpress",
				payload: {}
			})
			return true
		},
		onLoad({
			id,
			roomId,
			name,
			mtname
		}) {
			const url = "/hybrid/html/mtvd.html?id=" + id + "&roomId=" + roomId + "&name=" + name
			this.srcUrl = encodeURI(url)
			console.log(this.srcUrl)
			this.$store.commit(`common/setStatusState`, "videomt")
			const _this = this
			// #ifdef APP-PLUS | APP
			let currentWebview = this.$scope.$getAppWebview();
			setTimeout(() => {
				this.wv = currentWebview.children()[0]
			}, 1000)
			// #endif
			this.id = id
			this.name = name
			this.roomId = roomId
			if(mtname){
				uni.setNavigationBarTitle({
					title:mtname
				})
			}
			// 注册socket消息
			sublike('socket_MT', this.socketMessage)
			
			// #ifdef H5
			window.addEventListener('message', _this.hdhemsg, false)
			
			
			// #endif
		},
		onUnload() {
			unsublike('socket_MT', this.socketMessage)
			this.$store.commit(`common/setStatusState`, "normal")
			this.$socket.send({
				type: "MT_leaveRoom",
				data: {
					roomId: this.roomId
				}
			})
			// #ifdef H5
			window.removeEventListener("message",this.hdhemsg)
			// #endif
		},
		methods: {
			hdhemsg:function(e){
				const message = e.data.data.arg ? e.data.data.arg : JSON.parse(e.data.data)
				console.log(e,message,'HTML456');
				this.handleMessage(message)
			},
			socketMessage: function(e) {
				const _this = this
				console.log(123123, e)
				if (e.key == "socket_MT_joinRoom") {
					if (e.payload.id == this.id) {
						return
					}
					_this.sendMessage({
						type: "userJoin",
						payload: e.payload
					})
				}
				
				if (e.key == "socket_MT_leaveRoom") {
					if (e.payload.id == this.id) {
						return
					}
					_this.sendMessage({
						type: "userLeave",
						payload: e.payload
					})
				}

				if (e.key == "socket_MT_muteAudio") {
					_this.sendMessage({
						type: "userMuteAudio",
						payload: e.payload
					})
				}

				if (e.key == "socket_MT_resumeAudio") {
					_this.sendMessage({
						type: "userResumeAudio",
						payload: e.payload
					})
				}

				if (e.key == "socket_MT_closeVideo") {
					_this.sendMessage({
						type: "userCloseVideo",
						payload: e.payload
					})
				}

				if (e.key == "socket_MT_openVideo") {
					_this.sendMessage({
						type: "userOpenVideo",
						payload: e.payload
					})
				}
			},
			getStreams: async function(roomId) {
				const _this = this
				const ret = await this.$u.get('common/common/getRoomsStreams/' + roomId)
				console.log(1122333, ret)
				const streams = ret.data

				_this.sendMessage({
					type: "setStreams",
					payload: streams
				})
				// uni.request({
				// 	url:srsUrl + "/api/v1/streams/",
				// 	success(res) {
				// 		console.log(res)
				// 		const streams = res.data.streams
				// 		_this.sendMessage({
				// 			type:"setStreams",
				// 			payload:streams
				// 		})
				// 	}
				// })
			},
			sendMessage(data) {
				const message = JSON.stringify(data)
				// #ifdef APP | APP-PLUS
				this.wv.evalJS(`app.receviceMessage(${message})`);
				// #endif
				// #ifdef H5
				window.frames[0].postMessage(message,"*")
				// #endif
			},
			handleMessage: function(data) {
				const _this = this
				// #ifdef APP | APP-PLUS
				console.log(888888, data)
				const message = data.detail.data[0]
				// #endif
				// #ifdef H5
				console.log(8888881, data)
				const message = data
				// #endif
				if (message.type == "exitmtroom") {
					this.$store.commit(`common/setStatusState`, "normal")
					this.$socket.send({
						type: "MT_leaveRoom",
						data: {
							roomId: this.roomId
						}
					})
					setTimeout(()=>{
						_this.$store.dispatch({
							type:"common/initRooms"
						})
					},1500)
				}

				if (message.type == "pubstreamdone") {
					this.getStreams(this.roomId)
					this.$socket.send({
						type: "MT_joinRoom",
						data: {
							id: message.payload.id,
							name: message.payload.name,
							roomId: message.payload.roomId,
							video: message.payload.video,
							audio: message.payload.audio
						}
					})
				}

				if (message.type == "resumeAudio") {
					this.$socket.send({
						type: "MT_resumeAudio",
						data: {
							roomId: message.payload.roomId
						}
					})
				}

				if (message.type == "muteAudio") {
					this.$socket.send({
						type: "MT_muteAudio",
						data: {
							roomId: message.payload.roomId
						}
					})
				}

				if (message.type == "closeVideo") {
					this.$socket.send({
						type: "MT_closeVideo",
						data: {
							roomId: message.payload.roomId
						}
					})
				}

				if (message.type == "openVideo") {
					this.$socket.send({
						type: "MT_openVideo",
						data: {
							roomId: message.payload.roomId
						}
					})
				}

			}
		}
	}
</script>

<style>
</style>